<template>
	<view :style="{'background-color':pageBg}" style="float: left;width: 100%;min-height: 100%;">
		<!-- 头像用户信息 -->
		<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom top_max_box css-theme"
			:style="{'background-color':pageBg}" :class="[cueTheme]" @click="goMeDetail">
			<view class="tn-flex tn-flex-col-center tn-flex-row-left" style="float: left;width: 96%;">
				
				<view style="float: left;width: 17%;position: relative;">
			
					<image :src="userDetail.avatar" mode="aspectFill"
						style="height: 120rpx;width: 120rpx;border-radius: 50%;float: left;">
					</image>
					<view style="position: absolute;top:0px;right:0px;background-color: #C18B4D;"
						v-if="user.member == 1"
						class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center  tn-color-white">
						<view class="tn-icon-vip"></view>
					</view>
				</view>
				<view style="float: left;width: 83%;position: relative;">
					<view class="tn-padding-left-sm tn-text-xxl">
						{{(userDetail.name=='' || userDetail.name==null)?'momo':userDetail.name}}
					</view>
					<view class=" tn-padding-top-xs tn-padding-left-sm ">
						{{(userDetail.info=='' || userDetail.info==null)?'记录让生活更美好':userDetail.info}}</view>
					<view
						style="position: absolute;top:0px;right:0px;background-color: #C18B4D;border-radius: 30px;color:white;font-size: 14px;padding: 0px 8px;font-style: italic;"
						v-if="user.member == 1">
						<view v-if="userDetail.expireTime == '' || userDetail.expireTime == null">SVIP</view>
						<view v-else>VIP</view>
					</view>
				</view>
			</view>
		</view>

		
		<!-- 高级会员 -->
		<view 
			class=" tn-margin-top-xl1 tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right bg-color-box css-theme"
			:class="[cueTheme]">
			<tn-list-cell :hover="true" :unlined="true" :fontSize="30" @click="goMember()" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">
					<view style="background-color: #C18B4D;"
						class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center  tn-color-white">
						<view class="tn-icon-vip"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">
						<view>解锁更多功能</view>
						<view>专业版</view>
					</view>
					<view class="tn-margin-left-sm"
						style="border: 1px solid #C18B4D; color: #C18B4D;border-radius: 30px;padding: 4px 10px;">
						立即升级
					</view>
				</view>
			</tn-list-cell>

		</view>
		

		<!-- 主题外观-->
		<view
			class=" tn-margin-top-xl1 tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right bg-color-box css-theme"
			:class="[cueTheme]">

			
			<tn-list-cell :hover="true" :unlined="true" :fontSize="30" @click="goTheme()" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">

					<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center ">
						<view class="tn-icon-theme"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">主题外观</view>
					<view class="tn-margin-left-sm tn-color-gray tn-icon-right"></view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :fontSize="30" @click="goToRemindSound()" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">
					<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center ">
						<view class="tn-icon-clock"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">提醒与声音</view>
					<view class="tn-margin-left-sm tn-color-gray tn-icon-right"></view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" v-if="fingerPrintFlag == 1  ||  facialFlag == 1" :unlined="true" :fontSize="30" @click="goPassword()" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">
					<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center ">
						<view class="tn-icon-lock"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">密码保护</view>
					<view class="tn-margin-left-sm tn-color-gray tn-icon-right"></view>
				</view>
			</tn-list-cell>
		</view>

		<!-- 甲方爸爸提需求-->
		<view
			class=" tn-margin-top-xl1 tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-bottom tn-margin-right bg-color-box css-theme"
			:class="[cueTheme]">

			<tn-list-cell :hover="true" :unlined="true" :fontSize="30" @click="show_share=true" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">
					<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center ">
						<view class="tn-icon-share-triangle"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">邀请好友</view>
					<view class="tn-margin-left-sm tn-color-gray tn-icon-right"></view>
				</view>
			</tn-list-cell>

			<tn-list-cell :hover="true" :unlined="true" :fontSize="30" @click="service()" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">
					<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center ">
						<view class="tn-icon-folder-add"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">我要发言</view>
					<view class="tn-margin-left-sm tn-color-gray tn-icon-right"></view>
				</view>
			</tn-list-cell>
			<!-- <tn-list-cell :hover="true" :unlined="true" :fontSize="30" @click="copyUrl('拾光记App')" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">
					<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center ">
						<view class="tn-icon-wechat"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">微信公众号</view>
					<view class="tn-margin-left-sm tn-color-gray ">拾光记App</view>
					<view class="tn-margin-left-sm tn-color-gray tn-icon-right"></view>
				</view>
			</tn-list-cell> -->

			<!-- <tn-list-cell :hover="true" :unlined="true" :fontSize="30" @click="goUserManualReal()" class="css-theme" :class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">
					<view
						class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center ">
						<view class="tn-icon-edit-write"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">我要发言</view>
					<view class="tn-margin-left-sm tn-color-gray tn-icon-right"></view>
				</view>
			</tn-list-cell> 
			<tn-list-cell :hover="true" :unlined="true" :fontSize="30" @click="goUserManual()" class="css-theme" :class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">
					<view
						class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center ">
						<view class="tn-icon-help"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">用户手册</view>
					<view class="tn-margin-left-sm tn-color-gray tn-icon-right"></view>
				</view>
			</tn-list-cell> -->
			<tn-list-cell :hover="true" :unlined="true" :fontSize="30" @click="score()" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">
					<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center ">
						<view class="tn-icon-level"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">给应用评分</view>
					<view class="tn-margin-left-sm tn-color-gray tn-icon-right"></view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="about()" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">
					<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center ">
						<view class="tn-icon-tip"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">关于</view>
					<view class="tn-margin-left-sm tn-color-gray tn-icon-right"></view>
				</view>
			</tn-list-cell>
		</view>


		<tn-popup v-model="show_share" mode="bottom" :borderRadius="15" :zIndex="99999">
			<share></share>
		</tn-popup>

		<!-- <ren-customer-navigator></ren-customer-navigator> -->

		<tn-popup v-model="show_pwd" mode="bottom" :borderRadius="15" :backgroundColor="pageBg" :zIndex="99999">

			<view :style="{'background-color':pageBg}" v-if="fingerPrintFlag == 1"  class="container_box css-theme" :class="[cueTheme]"
				@click="goFingerPrint()">
				<view class="container_box_left">
					<view class="tn-icon-program" style="font-size: 20px;"></view>
					<view class="flex-item" style="margin-left: 10px;font-size: 15px;">指纹</view>
					<view class=" flex-item image_v" style="font-size: 18px;">
						<tn-switch @change="changeFingerPrintStatus" v-model="fingerPrintStatus" :size="36" activeColor="#18B998"></tn-switch>
					</view>
				</view>
			</view>
			<view :style="{'background-color':pageBg}" v-if="facialFlag == 1" class="container_box css-theme"
				:class="[cueTheme]" @click="goFacial()">
				<view class="container_box_left">
					<view class="tn-icon-share-triangle" style="font-size: 20px;"></view>
					<view class="flex-item" style="margin-left: 10px;font-size: 15px;">人脸</view>
					<view class=" flex-item image_v" style="font-size: 18px;">
						<tn-switch @change="changeFacialStatus" v-model="facialStatus" :size="36" activeColor="#18B998"></tn-switch>
					</view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	var _self
	import share from '@/components/share/share.vue'

	export default {
		// name: 'Me',
		components: {
			share,
		},
		data() {
			return {
				show_share: false,
				show_pwd: false,
				user: [],
				userDetail: [],
				globalUrl: getApp().globalData.url,
				amount: 0,
				loveStatus: 0,
				info8: '',
				platform: 0,
				fingerPrintFlag:0,
				facialFlag:0,
				fingerPrintStatus: false,
				facialStatus: false,
			}
		},
		onLoad(options) {
			_self = this;
			this.checkIsSupportSoterAuthentication()
		},
		onShow() {
			
			try {
			    var passwordstatus = uni.getStorageSync('passwordstatus');
			    if (passwordstatus) {
			        if(passwordstatus == 1){
						this.fingerPrintStatus = true
						this.facialStatus = false
					}else if(passwordstatus == 2){
						this.fingerPrintStatus = false
						this.facialStatus = true
					}
			    } else {
			       // console.log('未获取到缓存数据');
			    }
			} catch (e) {
			    //console.error('获取缓存数据时出错:', e);
			}
			
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data

						setTimeout(function() {
							_self.getUserInfo()
							_self.getSoundList()
							_self.getAmount()
							_self.getCommonInfo()
						}, 300);
					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})

		},
		methods: {
			changeFingerPrintStatus(e) {
				var status = 0
				if (e) {
					this.fingerPrintStatus = true
					this.facialStatus = false
					status = 1
				} else {
					this.fingerPrintStatus = false
					this.facialStatus = false
					status = 0
				}
				uni.setStorageSync('passwordstatus', status);
				
			},
			changeFacialStatus(e) {
				var status = 0
				if (e) {
					this.fingerPrintStatus = false
					this.facialStatus = true
					status = 2
				} else {
					this.fingerPrintStatus = false
					this.facialStatus = false
					status = 0
				}
				uni.setStorageSync('passwordstatus', status);
				
			},
			goPassword() {
				
				this.show_pwd = true
			},
			getCommonInfo() {
				var data = {
					userId: _self.user.id
				}
				this.$api.commonInfo(data).then((res) => {
					var resData = res;

					if (resData.code == "200") {
						if (resData.data[0].info3 != null && resData.data[0].info3 != '') {
							_self.loveStatus = resData.data[0].info3
						}

						console.log("=========getCommonInfo==========")
						console.log(resData)
						if (resData.data[0].info8 != null && resData.data[0].info8 != '') {
							_self.info8 = resData.data[0].info8
						}


					}
				})

			},
			getAmount() {
				var platform = 0
				if (uni.getSystemInfoSync().platform == 'ios') {
					platform = 0
				} else if (uni.getSystemInfoSync().platform == 'android') {
					platform = 1
				}
				this.platform = platform
				var data = {}

				if (platform == 1) {
					data = {
						type: 0
					}
				} else {
					data = {
						type: 1
					}
				}
				this.$api.appAmountNew(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {

						for (var i = 0; i < resData.data.length; i++) {
							var dataItem = resData.data[i]
							if (dataItem.name.indexOf("永久") > -1) {
								_self.amount = dataItem.realPrice
								break
							}


						}

					}
				})

				// var data = {
				// }
				// this.$api.appAmount(data).then((res) => {
				// 	var resData = res;
				// 	if (resData.code == "200") {
				// 		_self.amount = resData.data
				// 	}
				// })

			},
			getUserInfo() {
				_self.$api.detailUser({}, _self.user.id).then((res) => {
					var resData = res;
					if (resData.code == "200") {

						_self.userDetail = resData.data


						if (_self.userDetail.avatar == '' || _self.userDetail.avatar == null) {
							_self.userDetail.avatar = "../../static/bgday/1.jpg"
						} else if (_self.userDetail.avatar.indexOf('https') > -1 || _self.userDetail.avatar
							.indexOf('http') > -1) {

						} else {
							_self.userDetail.avatar = _self.globalUrl + _self.userDetail.avatar
						}
						let userInfo = uni.getStorageSync('user');
						if (_self.userDetail.member == 1) {
							userInfo.member = 1;
							userInfo.expireTime = _self.userDetail.expireTime;
							uni.setStorageSync('user', userInfo);
						} else {
							userInfo.member = 0;
							userInfo.expireTime = ''
							uni.setStorageSync('user', userInfo);
						}



					}
				})

			},

			getSoundList() {
				var data = {
					userId: _self.user.id
				}
				this.$api.listUserSet(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						if (resData.data.length > 0) {
							uni.setStorage({
								key: 'sound',
								data: resData.data[0],
								success: function() {}
							});

						}
					}
				})
			},
			goPromotion() { //推广
				uni.navigateTo({
					url: '/pages/me/promotion'
				});
			},
			goUserManual() {
				// 在H5中调用uni.navigateTo方法跳转
				uni.navigateTo({
					url: '/my-components/webview/webview?url=' + encodeURIComponent(
						'https://support.qq.com/product/621090/faqs-more')
				});
			},
			goUserManualReal() {
				uni.navigateTo({
					url: '/my-components/webview/webview?url=' + encodeURIComponent(
						'https://support.qq.com/products/621090')
				});
			},
			goMember() {
				uni.navigateTo({
					url: '/pages/me/member'
				});
			},
			goNews() {
				uni.navigateTo({
					url: '/pages/me/news'
				});
			},
			goToFunction() {
				uni.navigateTo({
					url: '/pages/me/meFunction'
				});
			},
			goToRemindSound() {
				uni.navigateTo({
					url: '/pages/me/remindSound'
				});
			},

			service() {
				uni.navigateTo({
					url: '/pages/me/meService'
				});
			},

			goTheme() {
				uni.navigateTo({
					url: '/pages/me/theme'
				});
			},
			score() {

				let platform = uni.getSystemInfoSync().platform
				switch (platform) {
					case "ios":
						console.log('你已经进入苹果平台，你需要执行的代码是！！！！')
						break;
					case "devtools":
						console.log('你已经进入微信小程序，你需要执行的代码是！！！！')
						break;
					case "android":
						console.log('你已经进入安卓平台！！！，你需要执行的代码是！！！！')
						break;
					default:
						break;
				}
				if (plus.os.name == "Android") {
					// 跳转安卓应用市场
					let appurl = "market://details?id=uni.UNI5D503AD" //这个是通用应用市场，如果想指定某个应用商店，需要单独查这个应用商店的包名或scheme及参数
					plus.runtime.openURL(appurl)
				} else {
					// 跳转AppStore
					let appleId = '123456'
					plus.runtime.launchApplication({
						action: `itms-apps://itunes.apple.com/cn/app/id${appleId}`,
					})
				}
			},
			about() {
				uni.navigateTo({
					url: '/pages/me/about'
				});
			},


			goMeDetail() {
				uni.navigateTo({
					url: '/pages/me/meDetail'
				});
			},
			copyUrl(value) {
				uni.setClipboardData({
					data: value,
					success() {
						uni.showToast({
							title: '已复制',
							icon: 'none'
						});
					}
				});
			},
			goFingerPrint(){
				this.checkIsSoterEnrolledInDeviceFingerPrint()
			},
			goFacial(){
				this.checkIsSoterEnrolledInDeviceFaceID()
			},
			checkIsSupportSoterAuthentication() {//检查是否支持指纹和人脸
				uni.checkIsSupportSoterAuthentication({
					success(res) {
						console.log(res);
						if(res.supportMode.indexOf("fingerPrint")>-1){
							_self.fingerPrintFlag = 1
						}
						if(res.supportMode.indexOf("facial")>-1){
							_self.facialFlag = 1
						}
					},
					fail(err) {
						console.log(err);
					},
					complete(res) {
						console.log(res);
					}
				})
			},
			checkIsSoterEnrolledInDeviceFingerPrint() {
				uni.checkIsSoterEnrolledInDevice({
					checkAuthMode: 'fingerPrint',
					success(res) {
						console.log(res);
						if(res.isEnrolled){
							// _self.startSoterAuthenticationFingerPrint()
						}else{
							uni.showToast({
								title: '请在手机上录入指纹',
								icon: 'none'
							});
						}
					},
					fail(err) {
						console.log(err);
					},
					complete(res) {
						console.log(res);
					}
				})
			},
			checkIsSoterEnrolledInDeviceFaceID() {
				uni.checkIsSoterEnrolledInDevice({
					checkAuthMode: 'facial',
					success(res) {
						console.log(res);
						if(res.isEnrolled){
							//_self.startSoterAuthenticationFaceID()
						}else{
							uni.showToast({
								title: '请在手机上录入人脸',
								icon: 'none'
							});
						}
					},
					fail(err) {
						console.log(err);
					},
					complete(res) {
						console.log(res);
					}
				})
			},
			
		}
	}
</script>
<style>
	page {
		height: 100%;

	}
</style>
<style lang="scss" scoped>
	// @import '@/static/css/templatePage/custom_nav_bar.scss';
	page {
		height: 100%;
		background-color: $page-bg !important;
		// display: flex;
		width: 100%;
		margin: 0px;
	}

	.css-theme {
		// border: 2px solid;
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}

	/* 用户头像 start */
	.logo-image {
		width: 120rpx;
		height: 120rpx;
		position: relative;
		// background-color: #FFFFFF;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
		overflow: hidden;

	}

	.template-about {
		background-color: $page-bg !important;
		// padding-bottom: 40rpx;
	}

	.bg-color-box {
		// background-color: #fff;
		border-radius: 20rpx
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	.top_max_box {
		padding: 140rpx 0rpx 30rpx 30rpx;
	}

	/* 顶部背景图 end */

	/* 波浪*/
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}

	.tnwave {
		overflow: hidden;
		position: absolute;
		z-index: 9999;
		height: 200rpx;
		left: 0;
		right: 0;
		top: 290rpx;
		bottom: auto;
	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}

	.bgTop {
		opacity: 0.4;
	}

	.waveTop {
		background-size: 50% 45px;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.6;
	}

	.waveMiddle {
		background-size: 50% 40px;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.95;
	}

	.waveBottom {
		background-size: 50% 35px;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}

	/* 波浪*/

	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			// margin: 20rpx 30rpx;
			margin-top: -330rpx;
		}
	}

	/* 页面 end*/

	/* 用户信息 start */
	.user-info {
		&__container {}

		&__avatar {
			width: 170rpx;
			height: 170rpx;
			border: 8rpx solid rgba(255, 255, 255, 0.05);
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		}

		&__nick-name {
			margin-top: 26rpx;
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}
	}

	/* 用户信息 end */
	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			// background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-weight: bolder;
				font-size: 18px;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器1 end */

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		// background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	.user-info__nick-name-top {
		font-weight: bold;
		margin-top: 20rpx;
		font-size: 18px;

	}

	.user-info__nick-name-bottom {
		margin-top: 20rpx;
		color: #A8A8A8;
		font-size: 14px;
		letter-spacing: 10px;
	}

	.tn-margin-top-xl1 {
		margin-top: 20rpx;
	}

	.iconClass {
		width: 40px;
		height: 40px;
		margin-top: 10px;
	}

	.u-grid-item-cls {

		width: 60px;
		height: 60px;
		border-radius: 50%;
		line-height: 60px;
		text-align: center;
		font-size: 24px;

	}
	.container_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		/* border: 1px solid #f1f1f1; */
		margin: 16rpx 0rpx;
	}
	
	.container_box_left {
		display: flex;
		align-items: center;
		float: left;
		width: 100%;
	}
	
	.container_box_left input {
		width: 100%;
		float: left;
	}
	
	.container_box_left image {
		width: 20px;
		height: 20px;
	}
	
	.container_box_left text {
		color: #f1f1f1;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	.image_v {
		margin-left: auto;
	}
	
</style>